// js内置事件之外还可以声明自定义的事件
/*------------------------使用Event构造函数------------------------*/
// 1 使用Event构造函数创建
let myEvt = new Event('my-evt', { bubbles: true, cancelable: true, composed: false })
// 2 监听事件my-evt
window.addEventListener(
  'my-evt',
  function (e) {
    console.log('my-evt事件被触发')
    console.log(e)
  },
  false
)
// 3 触发事件
window.dispatchEvent(myEvt)
/*------------------------使用CustomEvent构造函数------------------------*/
// 1 创建事件对象
let myCustomEvt = new CustomEvent('mycustomevt', {
  detail: { title: 'ABC' },
  bubbles: true,
  cancelable: true,
})

// 2 元素监听自定义事件mycustomevt
let box = document.querySelector('.box')
// 目标元素box上绑定事件监听器，监听mycustomevt事件的触发
box.addEventListener(
  'mycustomevt',
  // 事件mycustomevt的回调函数，当myCustomEvt事件被触发,次函数会执行
  function (e) {
    // box上触发的事件对象
    console.log(e)
    // 触发事件的目标元素是box
    console.log(e.target === this) // true ,this===box===e.target
    // 设置目标元素的样式color
    e.target.style.color = 'red'
  },
  false
)
// 3 触发自定义事件
let btn = document.querySelector('.btn')
btn.onclick = function () {
  // 触发box元素上的myCustomEvt事件
  box.dispatchEvent(myCustomEvt)
}
